<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel=" stylesheet " href="./css/index.css ">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <script src="./js/flexible.js"></script>
    <!-- Swiper JS -->
    <script src="./js/swiper-bundle.min.js"></script>



</head>

<body>
    <section class="sec1">
        <!-- 头部区域 -->
        <header class="header">黑马卖面</header>
        <!-- 导航栏部分 -->
        <nav class="nav">
            <a href="#" class="item">
                <img src="./icons/nav01.svg" alt="">
                <span>北京烤鸭</span>
            </a>
            <a href="#" class="item">
                <img src="./icons/菜02.svg" alt="">
                <span>茄汁虾仁</span>
            </a>
            <a href="#" class="item">
                <img src="./icons/03.svg" alt="">
                <span>糖醋里脊</span>
            </a>
            <a href="#" class="item">
                <img src="./icons/菜04.svg" alt="">
                <span>宫爆鸡丁</span>
            </a>
            <a href="#" class="item">
                <img src="./icons/菜05.svg" alt="">
                <span>红烧鲤鱼</span>
            </a>
            <a href="#" class="item">
                <img src="./icons/菜06.svg" alt="">
                <span>醋溜白菜</span>
            </a>
        </nav>
        <!-- 图片模块 -->
        <div class="go">
            <a href="#">臻享美食，皇家体验</a>
        </div>
    </section>
    <!-- 美味优选 -->
    <section class="content">

        <div class="con-hd">
            <h4>
                <img src="./icons/8.png" alt=""> 美味优选
            </h4>
            <a href="#" class="more">更多>></a>
        </div>
        <div class="get_job_focus">
            <!-- Swiper -->
            <!-- 第一个轮播图 -->
            <div class="swiper-container first">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <a href="#"><img src="./icons/菜01.png" alt=""></a>
                        <p>北京烤鸭 <br>roast Beijing duck</p>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="./icons/菜02.png" alt=""></a>
                        <p>辣子鸡丁 <br>saute diced chicken with hot peppers</p>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="./icons/菜03.png" alt=""></a>
                        <p>宫爆鸡丁 <br>saute diced chicken with peanuts</p>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="./icons/菜04.png" alt=""></a>
                        <p>红烧鲤鱼 <br>braised common carp</p>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="./icons/菜05.png" alt=""></a>
                        <p>茄汁虾仁 <br>saute fish slices with bamboo shoots</p>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="./icons/菜06.png" alt=""></a>
                        <p>涮羊肉 <br>instant boiled sliced mutton</p>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="./icons/菜07.png" alt=""></a>
                        <p>糖醋里脊 <br>pork fillets with sweet&sour sauce</p>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="./icons/菜08.png" alt=""></a>
                        <p>炒木须肉 <br>saute shredded pork with eggs&black fungus</p>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="./icons/菜09.png" alt=""></a>
                        <p>榨菜肉丝汤 <br>pork with Sichuan cabbage soup</p>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="./icons/菜10.png" alt=""></a>
                        <p>生炒肚片 <br>saute fish maw slices</p>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="./icons/菜11.png" alt=""></a>
                        <p>回锅肉 <br>saute pork in hot sauce</p>
                    </div>
                    <div class="swiper-slide">
                        <a href="#"><img src="./icons/菜12.png" alt=""></a>
                        <p>糖醋排骨 <br>saute chops with sweet&sour sauce</p>
                    </div>
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-button-prev"></div>
            <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
            <div class="swiper-button-next"></div>
            <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->

        </div>
    </section>
    <!-- 私藏珍品 -->
    <section class="content st">

        <div class="con-hd">
            <h4>
                <img src="./icons/8.png" alt=""> 珍品即飨
            </h4>
            <a href="#" class="more">更多>></a>
        </div>
        <!-- 第二个轮播图 -->
        <div class="study">
            <!-- Swiper -->
            <div class="swiper-container self_precious">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./images/蛋糕01.png" alt="">
                        <h5>蛋糕</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/蛋糕02.png" alt="">
                        <h5>蛋糕</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/蛋糕03.png" alt="">
                        <h5>蛋糕</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/爆米花04.png" alt="">
                        <h5>爆米花</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/炸面05.png" alt="">
                        <h5>炸面</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/2个冰淇淋06.png" alt="">
                        <h5>冰淇淋</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/点心07.png" alt="">
                        <h5>点心</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/点心08.png" alt="">
                        <h5>点心</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/罐装汽水09.png" alt="">
                        <h5>罐装汽水</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/汉堡10.png" alt="">
                        <h5>汉堡</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/荤素搭配11.png" alt="">
                        <h5>荤素搭配</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/鸡腿12.png" alt="">
                        <h5>鸡腿</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/煎饼13.png" alt="">
                        <h5>煎饼</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/煎饼14.png" alt="">
                        <h5>煎饼</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/烤肉15.png" alt="">
                        <h5>烤肉</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/披萨16.png" alt="">
                        <h5>披萨</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/披萨17.png" alt="">
                        <h5>披萨</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/三个小汉堡18.png" alt="">
                        <h5>小汉堡</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/烧烤19.png" alt="">
                        <h5>烧烤</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/水果20.png" alt="">
                        <h5>水果</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/水果21.png" alt="">
                        <h5>水果</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/汤22.png" alt="">
                        <h5>汤</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/套餐23.png" alt="">
                        <h5>套餐</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/饮料24.png" alt="">
                        <h5>饮料</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/包装25.png" alt="">
                        <h5>包装</h5>
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>
    <!-- 底部区域 -->
    <footer class="footer">
        <a href="#" class="item">
            <img src="./icons/首页.png" alt="">
            <p>首页</p>
        </a>
        <a href="#" class="item">
            <img src="./icons/购好物.png" alt="">
            <p>好物</p>
        </a>
        <a href="#" class="item">
            <img src="./icons/关注选中.png" alt="">
            <p>关注</p>
        </a>
        <a href="#" class="item">
            <img src="./icons/主页.png" alt="">
            <p>主页</p>
        </a>
    </footer>

    <!-- Initialize Swiper -->
    <!-- 沙箱函数 -->
    <script>
        (function() {
            var swiper = new Swiper('.first', {
                slidesPerView: 2,
                spaceBetween: 20,
                centeredSlides: true,
                loop: true,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },

            });
        })();
        // 如果有多个轮播图， 手动修改类名 swiper - container
        (function() {
            var swiper = new Swiper('.self_precious', {
                slidesPerView: 2.5,
                spaceBetween: 30,
                // 小圆点
                // pagination: {
                //     el: '.swiper-pagination',
                //     clickable: true,
                // },
            });
        })();
    </script>
</body>

</html>